<template>
    <div class="user">        
        <div class="userMessage">
            <img :src="userImage"/>
            <text>{{userName}}</text>
            <input v-if="canIUse" type="button" value="授权登录" open-type="getUserInfo" @click="bindGetUserInfo()" />
        </div>

        <div class="service">
            <p>我的服务</p>
            <div class="coupon">
                <span @click="toCoupon()">领劵中心</span>
                <span @click="toMyCoupon()">我的优惠券</span>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data () {
        return {
            canIUse: wx.canIUse('button.open-type.getUserInfo'),
            userImage:'',
            userName:''
        }
    },

    methods: {
        bindGetUserInfo() {
            let that = this;
            wx.getSetting({
                success:function(res) {
                    if (res.authSetting['scope.userInfo']) {                   
                        wx.getUserInfo({
                            success:function(res) {
                                //将字符串转化为对象
                                let resData = JSON.parse(res.rawData);
                                that.userName = resData.nickName;
                                that.userImage = resData.avatarUrl;
                                that.canIUse = false;
                                //console.log("res");

                                //将值传给后端，后端判断该用户是否存在，将值返回给前端
                                //wx.request({})
                            }
                        })
                    }
                }
            })                  
        },
        toCoupon() {
            wx.navigateTo({url: '../coupon/main'})
        },
        toMyCoupon() {
            wx.navigateTo({url: '../myCoupon/main'})
        }       
    },
    created() {

    },
}
</script>

<style scoped lang="stylus">
    .userMessage
        display flex
        box-sizing border-box
        padding 0 30rpx
        margin 60rpx 0 40rpx
        img 
            width 100rpx
            height 100rpx
            display block
            border-radius 50%
            border 2rpx solid #ffff00
        text
            line-height 100rpx
            margin-left 30rpx
        input
            background-color transparent
            margin 0
            line-height 100rpx
            padding-left 0
        input::after
            border none
    .service
        box-sizing border-box
        padding 0 20rpx        
        .coupon 
            width 100%
            height 120rpx
            border-top 2rpx solid #ccc
            border-bottom 2rpx solid #ccc
            display flex
            margin-top 20rpx
            span 
                line-height 120rpx
                display block
                width 50%
                text-align center
                font-size 30rpx
            span:first-of-type
                border-right 2rpx solid #ccc
</style>